<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { getDeptTree } from "@/api/system/dept";
import { getList } from "@/api/system/user";
import { fetchShare } from "@/api/associationAnalysis/index";

export interface Props {
  visible: boolean;
  id?: string;
}

// 弹窗展示与隐藏
const props = withDefaults(defineProps<Props>(), {
  visible: false,
  id: "",
});

interface Emit {
  (e: "update:visible", visible: boolean): void;
}

const emit = defineEmits<Emit>();

const show = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit("update:visible", visible);
  },
});

const filterText = ref("");
const treeRef = ref();

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

const filterNode = (value: string, data) => {
  console.log(data);
  if (!value) return true;
  return data.title.includes(value);
};

// 左侧树形机构数据
const treeData = ref([
  {
    title: "全部机构",
    children: [],
  },
]);

// 树形结构组件配置项
const defaultProps = {
  children: "children",
  label: "title",
};

const formInline = reactive({
  deptId: "",
  realName: "",
});

const page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 接口获取机构树状数据
const fetchDeptTree = async () => {
  try {
    const { data } = await getDeptTree();
    treeData.value[0].children = data;
  } catch (error) {
    ElMessage.error(error);
  }
};
fetchDeptTree();

// 节点点击操作
const handleNodeClick = ({ id }) => {
  formInline.deptId = id;
  fetchUserList();
};

// 定义表格数据
const tabel = reactive({
  data: [],
  userId: [],
});

// 接口获取用户列表
const fetchUserList = async () => {
  const { data } = await getList(page.currentPage, page.pageSize, formInline);
  tabel.data = data.records;
  page.total = data.total;
};
fetchUserList();

// 修改每页条数
const handleSizeChange = (val: number) => {
  page.pageSize = val;
  fetchUserList();
};
// 修改页数
const handleCurrentChange = (val: number) => {
  page.currentPage = val;
  fetchUserList();
};

// 行选中事件
const handleSelectionChange = (val) => {
  tabel.userId = val.map((item) => item.id);
};

// 分享操作
const handleShare = async () => {
  if (!tabel.userId.length) {
    ElMessage({
      message: "请选择要分享的人",
      type: "warning",
    });
    return;
  }
  try {
    let data = {
      id: props.id,
      userId: tabel.userId,
    };
    await fetchShare(data);
    ElMessage({
      type: "success",
      message: "分享成功",
    });
    show.value = false;
  } catch (error) {
    ElMessage.error(error);
  }
};
// 不能分享给自己
const selectableFn = (row, index) => {
  let sola_user_info = JSON.parse(sessionStorage.getItem("sola_user_info"));
  return row.id != sola_user_info.user_id;
};
</script>

<template>
  <el-dialog v-model="show" title="分享" width="60%">
    <div class="w-full">
      <el-row> </el-row>
      <el-row>
        <!-- 左侧树形机构 -->
        <el-col :span="6">
          <el-input v-model="filterText" placeholder="请输入" />
          <el-tree
            :data="treeData"
            :expand-on-click-node="false"
            :props="defaultProps"
            style="height: 500px; margin-top: 10px; overflow: auto"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            ref="treeRef"
          />
        </el-col>

        <!-- 右侧用户表格 -->
        <el-col :span="17" :offset="1">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名称">
              <el-input v-model="formInline.realName" placeholder="" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="fetchUserList">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            ref="multipleTableRef"
            :data="tabel.data"
            border
            style="width: 100%; height: 460px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              :selectable="selectableFn"
            />
            <!-- <el-table-column label="用户昵称" property="name" /> -->
            <el-table-column label="用户姓名" property="realName" />
            <el-table-column label="所属岗位" property="postName" />
            <el-table-column label="所属角色" property="roleName" />
          </el-table>

          <el-pagination
            style="margin-top: 20px"
            v-model:current-page="page.currentPage"
            v-model:page-size="page.pageSize"
            :page-sizes="[10, 50, 100, 300, 500]"
            layout="sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="handleShare"> 分 享 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
